<template>
    <div class="max-box">
        <div class="tabs-box">
            <div class="tabs">
                <div class="tab-box">
                    <div class="tab" v-for="(tab, index) in tabs" :key="index" @click="activeTabIndex = index"
                        :class="{ active: activeTabIndex === index }">
                        {{ tab.label }}
                    </div>
                </div>
                <div class="tabs-item-box" v-for="(item, index) in tabs" v-show="activeTabIndex === index">
                    <ModelListView v-if="activeTabIndex === index" :entityData="item.data" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import ModelListView from './ModelListView.vue'

export default {
  components: {
    ModelListView
  },
  data() {
    return {
      route: this.$route,
      ql: [],
      queryList: [],
      activeTabIndex: 0,
      tabs: []
    };
  },
  methods: {
    async getDate(queryListData) {
      let typeNameMatch = queryListData.match(/typeName=([^&]*)/);
      let typeName = typeNameMatch[1];
      let modifiedRecord = queryListData.replace(/&?typeName=[^&]*/, "");
      console.log(222222222,modifiedRecord)
      try {
        const response = await axios.get(process.env.api + `/transaction/sub/getEntityTable2${modifiedRecord}`);
        const res = await axios.post(process.env.api + '/route/route/getPropertyConversion', response.data);
        console.log('---------------<');
        console.log(response);
        console.log(res);

        let resData = res.data.data;
        let responseData = response.data.data;
        let mergedArray = resData.map((item, index) => {
            return {
                ...item,
                code: responseData[index].field8
            }
        })
        console.log(mergedArray)
        return {
          label: typeName,
          data: mergedArray
        };
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    },
    async fetchData() {
      // this.ql = this.route.query.list.split('');
      // for (let i = 0; i < this.ql.length; i++) {
      //   if (this.ql[i] === '!') this.ql[i] = '?';
      //   if (this.ql[i] === '*') this.ql[i] = '&';
      // }
      // let qs = '';
      // for (let i = 0; i < this.ql.length; i++) {
      //   qs += this.ql[i];
      // }

      // this.queryList = JSON.parse(qs);
      this.queryList = this.incomData
      console.log('传入的数据：', this.queryList);

      for (let i = 0; i < this.queryList.length; i++) {
        this.queryList[i] = '?' + this.queryList[i].split('?')[1];
      }

      const promises = this.queryList.map(this.getDate);
      try {
        const results = await Promise.all(promises);
        this.tabs.push(...results);
        console.log(results);
        this.$emit('loadedData')
      } catch (error) {
        console.error('Error fetching data: ', error);
      }
    }
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    '$route'(to, from) {
      this.route = to;
      // this.fetchData(); // 当路由变化时重新获取数据
    }
  },
  props:{
    incomData:{
      type:Array,
      default:[]
    }
  }
};
</script>

<style scoped>
.max-box {
    width: 100%;
    height: 100%;
}

.tabs {
    height: 100%;
}

.tabs-box {
    width: 100%;
}

.tab-box {
    width: 100%;
    height: 6vh;
    position: sticky;
    display: flex;
    top: 0px;
    background-color: white;
    font-size: 1.4vw;
    box-shadow: 0 0.4vw 0.4vw #e8e8e8;
}

.tab {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab.active {
    background-color: #465fee;
    color: white;
}

.tabs-item-box {
    width: 100%;
    height: 94vh;
    padding: 0 0.2vw;
    overflow-y: auto;
}
</style>